<template>
  <div class="tab">
    <router-link class="tab-item" to="/recommend" tab="div">
      <span class="tab-link">推荐</span>
    </router-link>
    <router-link class="tab-item" to="/singer" tab="div">
      <span class="tab-link">歌手</span>
    </router-link>
    <router-link class="tab-item" to="/rank" tab="div">
      <span class="tab-link">排行</span>
    </router-link>
    <router-link class="tab-item" to="/search" tab="div">
      <span class="tab-link">搜索</span>
    </router-link>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="stylus">
@import "~common/stylus/variable"
.tab
  display flex
  line-height 44px
  font-size $font-size-medium
  &-item
    flex 1
    text-align center
  &-link
    color $color-text-l
    padding-bottom 5px
    .router-link-active &
      color: $color-theme
      border-bottom: 2px solid $color-theme


</style>

